<template>
	<view class="flex-column page">
		<custom-navigation title="供应商" :rightImg="!isDrag?'/static/add.png':null" :rightTxt="isDrag?'保存':null"
			@rightAction="saveSort"></custom-navigation>

		<view class="search-box flex-row-center">
			<image src="../../static/search.png"></image>
			<input placeholder="供应商名称" placeholder-style="color: rgba(153, 153, 153, 1);" v-model="searchStr"
				@confirm="onSearch" @input="input_val=true" @focus="input_val=true" @blur="input_val=false" confirm-type="search" type="text"    @keydown.enter="onSearch" />
		</view>

		<scroll-view :scroll-y="true" class="list">
			<HM-dragSorts :list="list" :isDrag="isDrag" :isMultiple="isMultiple" :autoScroll="true" :feedbackGenerator="true" :longTouch="isDrag"
				:listHeight="listHeight" :rowHeight="100" @change="change" @confirm="confirm" @onclick="onclick">
			</HM-dragSorts>
		</scroll-view>
		<view class="bottom flex-row-center" v-if="isMultiple" @click="multipleSelect">
			<view class="text">已选{{getAllNum()}}</view>
			<view class="btn2">确认选择</view>
		</view>
		
		<!-- <view class="bottom flex-column-center" v-else-if="!input_val && !isDrag" @click="isDrag=true">
			<view class="btn">排序</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				classifycations: [],
				listHeight: 100,
				list: [],
				moveList: [],
				isDrag: false,
				selectMode: false,
				searchStr: '',
				isMultiple: false,
				input_val:false,
			}
		},
		onLoad(options) {
			this.selectMode = options.selectMode ?? false
			this.isMultiple = options.isMultiple ?? false
			this.curInfo
		},
		onShow() {
			this.getData();
		},
		methods: {
			getAllNum(){
				console.log("getAllNum",);
				let count =0;
				for(let i in this.moveList){
					if(this.moveList[i].check){
						count++
					}
				}
				return count;
			},
			multipleSelect() {
				let list=[];
				for(let i in this.moveList){
					if(this.moveList[i].check){
						list.push(this.moveList[i])
					}
				}
				uni.setStorageSync("multipleSelectSupplier", list)
				
				uni.navigateBack()
			},
			onSearch(e) {
				this.getData()
			},
			saveSort() {
				if (this.isDrag == false) {
					uni.navigateTo({
						url: '/pages/goods/baseinfo/add_goods_supplier'
					})
				} else {
					this.isDrag = false;

					uni.showLoading({
						title: "加载中..."
					})

					let params = [];
					for (let i in this.moveList) {
						params.push({
							"serviceName": "srvretail_supplier_info_update",
							"condition": [{
								"colName": "id",
								"ruleType": "eq",
								"value": this.moveList[i].id
							}],
							"data": [{
								"serial_no": i+""
							}]
						})
					}
					if(params.length){
						this.$apiPost(  "/retail/operate/srvretail_supplier_info_update"  ,params).then(res => {
							uni.hideLoading()
							if (res.state == 'SUCCESS') {
								uni.showToast({
									title: "修改成功！",
									mask: true
								})
								this.getData()
							}
						})
					} else {
						setTimeout(() => {
							uni.hideLoading()
							uni.showToast({
								title: "修改成功！",
								mask: true
							})
							this.getData()
						}, 100);
					}


				}
			},
			getData() {
				let condition = [{
					"colName": "supplier_state",
					"ruleType": "eq",
					"value": "正常",
					"literalValue": true
				}];

				if (this.searchStr.length > 0) {
					condition.push({
						"colName": "supplier_name",
						"ruleType": "like",
						"value": this.searchStr
					})
				}




				this.$apiPost("/retail/select/srvretail_supplier_info_select", {
					"serviceName": "srvretail_supplier_info_select",
					"colNames": ["*"],
					"condition": condition,
					"order": [],
					"page": {
						"pageNo": 1,
						"rownumber": 430
					}
				}).then(res => {
					if(res.data){
						res.data.sort((a, b) => Number(a.serial_no) - Number(b.serial_no)); //从小到大排序
					}
					for (let i in res.data) {
						res.data[i].name = res.data[i].supplier_name
					}
					this.list = res.data;
					this.listHeight = this.list.length * 120;
				})
			},
			onclick(e) {
				console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ===');
				if (this.selectMode) {
					var pages = getCurrentPages(); // 获取页面栈
					var currPage = pages[pages.length - 1]; // 当前页面
					var prevPage = pages[pages.length - 2]; // 上一个页面
					prevPage.supplier = this.list[e.index]
					uni.navigateBack()
					return
				}
				//修改
				let item = this.list[e.index]
				if(item.is_topping=="是"){
					return;
				}
				let info = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/goods/baseinfo/add_goods_supplier?info=${info}`
				})
			},
			change(e) {
				console.log('=== change start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e) {
				console.log('=== confirm start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== confirm end ===');
				console.log('moveList', e.list);
				this.moveList = e.list
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding-left: 42rpx;
		margin: 12rpx;
		width: 700rpx;
		height: 40px;
		opacity: 1;
		border-radius: 80rpx;
		background: rgba(255, 255, 255, 1);

		image {
			width: 40rpx;
			height: 40rpx;
		}

		input {
			flex: 1;
			margin-left: 8rpx;
			font-size: 28rpx;
			font-weight: 500;

			text-align: left;
			vertical-align: top;
		}
	}

	.list {
		flex: 1;
		height: 500rpx;
	}

	.bottom {
		width: 100%;
		height: 146rpx;
		justify-content: center;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 -32rpx 32rpx 3rpx rgba(245, 245, 247, 1);
		z-index: 1;

		.text {
			flex: 1;
			font-size: 32rpx;
			font-weight: 700;
			margin-left: 24rpx;
			color: rgba(51, 51, 51, 1);
		}

		.btn2 {
			width: 320rpx;
			height: 80rpx;
			opacity: 1;
			margin-right: 100rpx;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
		}
		.btn {
			width: 320rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>
